<template>
	<view class="app">
		<block v-if="user!=''">
			<view class="hdr">
			<view class="header">
				<image class="header_bg" :src="status?'../../static/task/kaigong.png':'../../static/task/xiuxi.png'"></image>
				<view class="header_nav">
					<view>
						<!-- <image @click="ret()" class="ret" src="../../static/task/task_left.png"></image> -->
					</view>
					<view style="text-align: center;font-size: 36rpx;color: #FFFFFF;">我的任务</view>
					<view @click="changeStatus()" style="position: relative;">
						<image class="header_right_img" src="../../static/task/qiehuan.png"></image>
						<text class="qh">切换</text>
					</view>
				</view>
				<view class="status">
					<text>{{status?'开工中':'休息中'}}</text>
				</view>
			</view>
			<view class="nav_list">
				<view class="nav_list_item" @click="changeNav(0,0)" :class="nav_index==0?'selector':''">
					待取货<text style="color: red;">{{waitingCount==0?'':'('+waitingCount+')'}}</text>
					<block v-if="nav_index==0">
						<text class="line"></text>
					</block>
				</view>
				<view class="nav_list_item" @click="changeNav(1,0)" :class="nav_index==1?'selector':''">
					配送中<text style="color: red;">{{dispenseCount==0?'':'('+dispenseCount+')'}}</text>
					<block v-if="nav_index==1">
						<text class="line"></text>
					</block>
				</view>
				<view class="nav_list_item" @click="changeNav(2,0)" :class="nav_index==2?'selector':''">
					超时<text style="color: red;">{{timeoutCount==0?'':'('+timeoutCount+')'}}</text>
					<block v-if="nav_index==2">
						<text class="line"></text>
					</block>
				</view>
				<view class="nav_list_item nav_list_item2" @click="changeNav(3,0)" :class="nav_index==3?'selector':''">
					配送异常<text style="color: red;">{{abnormalCount==0?'':'('+abnormalCount+')'}}</text>
					<block v-if="nav_index==3">
						<text class="line" style="left: 73rpx;"></text>
					</block>
				</view>
				<view class="nav_list_item nav_list_item3" @click="changeNav(4,0)" :class="nav_index==4?'selector':''">
					完成
					<block v-if="nav_index==4">
						<text class="line" style="left: 23rpx;"></text>
					</block>
				</view>
			</view>
			</view>
			<view class="app-main">
			<view class="form" v-if="list.length>0" v-for="(item,index) in list" :key="index">
				<view class="form_item">
					<view class="form_item_l item2">{{navList[nav_index]}}</view>
					<view class="form_item_r"></view>
				</view>
				<view class="form_item">
					<view class="form_item_l">前置仓库</view>
					<view class="form_item_r">{{item.storeName}}</view>
				</view>
				<view class="form_item">
					<view class="form_item_l">送达时间</view>
					<view class="form_item_r">{{item.predictTime=='NaN-aN-aN aN:aN:aN'?'':item.predictTime}}</view>
				</view>
				<view class="form_item">
					<view class="form_item_l">订单编号</view>
					<view class="form_item_r">{{item.orderNo}}</view>
				</view>
				<view class="form_item">
					<view class="form_item_l">收货地址</view>
					<view class="form_item_r fr2" @click="openMap(item.province+item.city+item.county+item.address)">
						<view class="v1">
							<text class="shdz">{{item.province}}-{{item.city}}-{{item.county}}-{{item.address}}</text>
						</view>
						<view class="v2">

							<image class="addr" src="../../static/task/xxxard.png"></image>
						</view>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_l">联系电话</view>
					<view class="form_item_r" @click="call(item.phone)">
						<text style="padding-right: 24rpx;">{{item.phone}}</text>
						<image class="phone" src="../../static/task/call.png"></image>
					</view>
				</view>
				<view style="padding-bottom: 46rpx;padding-top: 36rpx;text-align: right;">
					<block v-if="nav_index==0">
						<button class="btn btn2" @click="getDetails(item.id)">订单详情</button>
						<button class="btn btn3" @click="start(item.id,item.province+item.city+item.county+item.address)">开始配送</button>
					</block>
					
					<block v-if="nav_index==1">
						<button class="btn btn2" @click="getDetails(item.id)">订单详情</button>
						<button class="btn btn2 btn4" @click="order_error(item.id,item.province+item.city+item.county+item.address)">订单异常</button>
						<button class="btn btn3" @click="complete(item.id,item.province+item.city+item.county+item.address)">完成配送</button>
					</block>
					<block v-if="nav_index==2">
						<button class="btn btn2" @click="getDetails(item.id)">订单详情</button>
						<button class="btn btn2 btn4" @click="order_error(item.id,item.province+item.city+item.county+item.address)">订单异常</button>
						<button class="btn btn3" @click="complete(item.id,item.province+item.city+item.county+item.address)">完成配送</button>
					</block>
					<block v-if="nav_index==3">
						<button class="btn btn2" @click="getDetails(item.id)">订单详情</button>
						<button class="btn btn3" @click="complete(item.id,item.province+item.city+item.county+item.address)">完成配送</button>
					</block>
				</view>
			</view>
			<!-- <view v-if="list.length==0" style="text-align: center;padding-top: 60rpx;color: #999999;font-size: 30rpx;">
				暂无任何信息
			</view> -->
			<view style="height: 200rpx;background-color: #F6F6F6;">
			<uni-load-more :status="more" :showIcon="showIcon"></uni-load-more>
				
			</view>
			<view class="botm">
				<view class="botm_inner">
					<image class="rw_img" src="../../static/task/fuwuxing.png"></image>
					<text class="botm_txt">
						我的任务
					</text>
				</view>
			</view>
			<!-- 遮罩层-->
			<view v-if="flag==true" class="mask">
				<view class="mask-modal">
					<view class="mask-modal-tit">配送异常</view>
					<textarea class="mask_area" v-model="msg" placeholder="请输入异常原因" placeholder-class="pl"></textarea>
					<view class="mask_bottom">
						<view>
							<button @click="check(0)" style="float: left;" class="mask_btn">取消</button>
						</view>
						<view>
							<button @click="check(1)" style="float: right;" class="mask_btn mask_btn2">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		</block>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {uniLoadMore},
		computed: mapState(['userInfo']),
		data() {
			return {
				more:"noMore",
				showIcon:false,
				navList: ['待取货', '配送中', '超时', '配送异常', '完成'],
				nav_index: 0,
				status: false,
				flag: false,
				user: '',
				list: [],
				msg: '',
				orderId: '',
				waitingCount:'',
				dispenseCount:'',
				timeoutCount:'',
				abnormalCount:'',
				completedCount:'',
				lng:0,
				lat:0,
				addr:'',
				totalPageNo:0,
				pageNo:0,
				param_index:''
				
			}
		},
		onLoad(e) {
			if(e.nav_index!=undefined){
				this.param_index=e.nav_index
			}
		},
		onShow() {
			let that = this
			let user = uni.getStorageSync("userInfo")
			// console.log(user)
			if (user == null) {
				uni.showModal({
					title: '系统提示',
					content: '您尚未登录，是否立即登录？',
					showCancel: true,
					confirmText: '登录',
					success: function(res) {
						if (res.confirm) {
							that.toLogin('task', 1)
						}
					}
				})
				return;
			}
			that.user = user
			if(that.param_index!=''){
				console.log("index")
				that.getData(that.param_index,0)
			}else{
				console.log("task")
			that.getData(that.nav_index,0)
			}
			that.getNum()
			that.getWorkStatus(user)
		},
		//上拉刷新
		onReachBottom() {
			uni.showNavigationBarLoading()
			this.getData(this.nav_index,1)
			
		},
		//下拉刷新
		onPullDownRefresh() {
			uni.startPullDownRefresh()
			this.getData(this.nav_index,0)
			this.getNum()
		},
		methods: {
			getWorkStatus(user){
				let that=this
				let params={
					_gp: 'app.rider',
					_mt: 'getWorkingState',
					riderId: user.id
				}
				that.new_request(params, user.accessToken).then(res => {
					// console.log(res.data)
				      that.status=res.data.workState==1?true:false
				})
			},
			dh(index,longitude,latitude) {
				let that=this
				
				if (index==0&&plus.runtime.isApplicationExist({pname: 'com.autonavi.minimap'})) {
					//用户已安装高德地图  
					plus.runtime.openURL('androidamap://navi?sourceApplication=com.knssshy.sj&lat=' + latitude + '&lon=' + longitude + '&dev=0',function(e) {
							plus.nativeUI.confirm("检查到您未安装\"高德地图\".");
						});
				} else if (index==1&&plus.runtime.isApplicationExist({pname: 'com.baidu.BaiduMap'})) {
					//用户已安装百度地图 
					plus.runtime.openURL('bdapp://map/direction?destination=' + latitude + ',' + longitude +'&coord_type=gcj02&mode=driving&src=com.knssshy.sj',function(e) {
							plus.nativeUI.confirm("检查到您未安装\"百度地图\".");
						});
				} else {
					uni.showToast({
						title:'您未安装此地图',
						icon:'none',
						duration:2000
					})
				}
			},
			openMap(addr) {
				let that=this
				let list=[]
				// #ifdef H5
				list=['高德地图', '百度地图']
				// #endif
				// #ifdef APP-PLUS
				list=['高德地图', '百度地图','取消']
				// #endif
				uni.showActionSheet({
					itemList: list,
					success: function(res) {
						let index = res.tapIndex
						if(index==0||index==1){	
						   uni.request({
						   	url:'https://restapi.amap.com/v3/geocode/geo?address='+addr+'&key=f8198cb30648c3450562141ea3ace924',
						   	success:function(res){
						   		if(res.statusCode===200){
						   			let loca=res.data.geocodes[0].location
						   			that.dh(index,loca.split(",")[0],loca.split(",")[1])
						   		}
						   	}
						   })
						}
					},
					fail: function(res) {
						// console.log(res.errMsg);
					}
				})
			},
			changeStatus() {
				let that = this
				let params = {
					_gp: 'app.rider',
					_mt: that.status ? 'toRest' : 'toWorking',
					riderId: that.user.id
				}
				that.request(params, that.user.accessToken).then(res => {
					// console.log(res)
					if (res.errno === 200) {
						that.status = !that.status
					}
				})

			},
			getDetails(id) {
				console.log("传过去的id:"+id)
				uni.navigateTo({
					url: '../order/order?id=' + id
				})
			},
			complete(id,addr) {
				let that = this
				uni.request({
					url:'https://restapi.amap.com/v3/geocode/geo?address='+addr+'&key=f8198cb30648c3450562141ea3ace924',
					success:function(res){
						if(res.statusCode===200){
							let loca=res.data.geocodes[0].location
							that.lng=loca.split(",")[0]
							that.lat=loca.split(",")[1]
						}
					}
				})
				let params = {
					_gp: 'app.task',
					_mt: 'complete',
					riderOrderId: id,
					lng:that.lng,
					lat:that.lat
				}
				that.request(params, that.user.accessToken).then(res => {
					if (res.errno == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 1500
						})
					}
					setTimeout(function() {
						that.changeNav(4,0)
					}, 1500)
				})

			},
			getNum(){
				let that = this
				let params = {
					_gp: 'app.task',
					_mt: 'statistical'
				}
				that.new_request(params, that.user.accessToken).then(res => {
					uni.stopPullDownRefresh()
					// console.log(res.data)
					//待取货
					that.waitingCount=res.data.waitingCount==undefined?0:res.data.waitingCount
					//配送中
					that.dispenseCount=res.data.dispenseCount==undefined?0:res.data.dispenseCount
					//超时
					that.timeoutCount=res.data.timeoutCount==undefined?0:res.data.timeoutCount
					//配送异常
					that.abnormalCount=res.data.abnormalCount==undefined?0:res.data.abnormalCount
					//完成
				    that.completedCount=res.data.completedCount==undefined?0:res.data.completedCount
				})
			},
			getData(index,num) {
				// console.log("num:"+num)
				let that = this
				let params = {
					_gp: 'app.task',
					_mt: 'list',
					status: index,
					page:num==0?1:that.pageNo+1
				}
				that.request(params, that.user.accessToken).then(res => {

					console.log(res.data)
					if (res.errno == 200) {
						that.totalPageNo=res.data.totalPageNo
						that.pageNo=res.data.pageNo
						// console.log("-----")
						
						if(res.data.total-that.list.length-res.data.items>0){
							that.more='more'
						}else{
							that.more='noMore'
						}
						let arr = res.data.items
						if (arr.length > 0) {
							for (let i = 0; i < arr.length; i++) {
								var crtTime = new Date(arr[i].predictTime);
								arr[i].predictTime = that.dateFtt('yyyy-MM-dd hh:mm:ss', crtTime)
							}
						}
						if(num==0){
						that.list = arr
						}else{
							for(let j=0;j<arr.length;j++){
								that.list.push(arr[j])
							}
						}
					}
				})
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			start(id,addr) {
				let that = this
				uni.request({
					url:'https://restapi.amap.com/v3/geocode/geo?address='+addr+'&key=f8198cb30648c3450562141ea3ace924',
					success:function(res){
						// console.log(res)
						if(res.statusCode===200){
							let loca=res.data.geocodes[0].location
							that.lng=loca.split(",")[0]
							that.lat=loca.split(",")[1]
						}
					}
				})
				let params = {
					_gp: 'app.task',
					_mt: 'begin',
					riderOrderId: id,
					lng:that.lng,
					lat:that.lat
				}
				that.request(params, that.user.accessToken).then(res => {
					// console.log(res)
					if (res.errno == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 1500
						})
						setTimeout(function() {
							that.changeNav(1,0)
							// uni.navigateTo({
							// 	url: '../order/order?orderid=' + id
							// })
						}, 1500)
					}
				})
			},
			ret() {
				// uni.navigateBack({
				// 	delta:1
				// })	
			},
			order_error(id,addr) {
				this.flag = !this.flag
				this.orderId = id,
				this.addr=addr
			},
			check(num) {
				if (num == 0) {
					this.flag = !this.flag
					return;
				}
				if (num == 1) {
					let that = this
					if (that.msg == '' || that.msg.length == 0) {
						uni.showToast({
							title: '请输入异常原因',
							icon: 'none',
							duration: 1500
						})
						return;
					}
					uni.request({
						url:'https://restapi.amap.com/v3/geocode/geo?address='+that.addr+'&key=f8198cb30648c3450562141ea3ace924',
						success:function(res){
							if(res.statusCode===200){
								let loca=res.data.geocodes[0].location
								that.lng=loca.split(",")[0]
								that.lat=loca.split(",")[1]
							}
						}
					})
					this.flag = !this.flag
					let params = {
						_gp: 'app.task',
						_mt: 'abnormal',
						riderOrderId: that.orderId,
						reason: that.msg,
						lng:that.lng,
						lat:that.lat
					}
					that.request(params, that.user.accessToken).then(res => {
						if (res.errno == 200) {
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 1500
							})
							setTimeout(function() {
								that.changeNav(3,0)
							}, 1500)
						}
					})
				}
			},
			changeNav(index,num) {
				if(num==0){
					this.list=[]
				}
				// console.log(index)
				this.getData(index,num)
				this.nav_index = index
				this.getNum()
			}
		}
	}
</script>

<style scoped>
	.hdr{
		width: 750rpx;
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.app-main{
		position: absolute;
		width: 750rpx;
		top: 410rpx;
	}
	.toLogin {
		padding-top: 100rpx;
		text-align: center;
		color: red;
		font-size: 30rpx;
	}

	.header_right_img {
		width: 56rpx;
		height: 56rpx;
		position: absolute;
		right: 72rpx;
		top: -6rpx;

	}

	.qh {
		font-size: 30rpx;
		color: #FFFFFF;
		position: absolute;
		right: 0;
		top: 4rpx;
	}

	.app {
		background-color: #F6F6F6;
	}

	.ret {
		width: 20rpx;
		height: 36rpx;
	}

	.header {
		height: 322rpx;
		position: relative;
	}

	.header_bg {
		width: 750rpx;
		height: 322rpx;
	}

	.header_nav {
		width: 686rpx;
		display: flex;
		flex-direction: row;
		position: absolute;
		top: 60rpx;
		left: 32rpx;
	}

	.header_nav view {
		flex: 1;
	}

	.status {
		width: 750rpx;
		text-align: center;
		position: absolute;
		color: #FFFFFF;
		font-size: 48rpx;
		top: 164rpx;
		font-weight: bold;

	}

	.status text {
		display: inline-block;
		width: 242rpx;
		height: 84rpx;
		background-color: #FFFFFF;
		border-radius: 39rpx;
		text-align: center;
		line-height: 84rpx;
		color: #3662DD;
	}

	.nav_list {
		height: 88rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.nav_list_item {
		width: 150rpx;
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
		text-align: center;
		font-size: 28rpx;
		color: #666666;
	}

	.nav_list_item2 {
		width: 200rpx;
		position: absolute;
		right: 100rpx;
	}

	.nav_list_item3 {
		width: 100rpx;
		position: absolute;
		right: 0;
	}

	.line {
		display: inline-block;
		background-color: #3662DD;
		width: 54rpx;
		height: 8rpx;
		border-radius: 4rpx;
		position: absolute;
		bottom: 0;
		left: 48rpx;
	}

	.form {
		padding: 0 47rpx;
		border-top: 24rpx solid #F6F6F6;
		background-color: #FFFFFF;
	}

	.form_item {
		height: 98rpx;
		border-bottom: 1rpx solid #F6F6F6;
		display: flex;
		flex-direction: row;
	}

	.selector {
		color: #3662DD;
	}

	.form_item_l {
		width: 170rpx;
		height: 98rpx;
		line-height: 98rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.form_item_r {
		width: 486rpx;
		height: 98rpx;
		line-height: 98rpx;
		font-size: 28rpx;
		color: #333333;
		text-align: right;
	}

	.addr {
		display: inline-block;
		width: 34rpx;
		height: 36rpx;
		position: relative;
		top: 6rpx;
	}

	.phone {
		width: 38rpx;
		height: 36rpx;
		position: relative;
		top: 6rpx;
	}

	.item2 {
		font-weight: bold;
		color: #333333;
		font-size: 32rpx;
	}

	.btn {
		display: inline-block;
		width: 180rpx;
		height: 74rpx;
		line-height: 74rpx;
		color: #3662DD;
		font-size: 30rpx;
		border: 1rpx solid #3662DD;
		background-color: #FFFFFF;
	}

	.btn2 {
		margin-right: 30rpx;
	}

	.btn3 {
		background: linear-gradient(to right, #5095F4, #3662DD);
		color: #FFFFFF;
		border: none;
	}

	.botm {
		height: 120rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		width: 750rpx;

	}

	.botm_inner {
		height: 120rpx;
		position: relative;
		font-size: 30rpx;
		color: #3662DD;
	}

	.rw_img {
		width: 58rpx;
		height: 64rpx;
		position: absolute;
		top: 28rpx;
		left: 240rpx;

	}

	.botm_txt {
		position: absolute;
		left: 328rpx;
		top: -6rpx;
		/* #ifdef H5 */
		top: 40rpx;
		/* #endif */
	}

	.btn4 {
		border-color: #FF473C;
		color: #FF473C;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.mask-modal {
		width: 600rpx;
		height: 520rpx;
		position: relative;
		background-color: #FFFFFF;
		border-radius: 16rpx;
	}

	.mask-modal-tit {
		color: #000000;
		font-size: 32rpx;
		padding: 40rpx 0;
		text-align: center;
		font-weight: bold;
	}

	.mask_area {
		width: 500rpx;
		height: 186rpx;
		font-size: 30rpx;
		background-color: #F8F8F8;
		margin: 0 auto;
		padding: 24rpx 20rpx;

	}

	.pl {
		font-size: 30rpx;
		color: #999999;
	}

	.mask_bottom {
		width: 500rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		padding-top: 40rpx;
	}

	.mask_bottom view {
		flex: 1;
		height: 96rpx;
	}

	.mask_btn {
		width: 238rpx;
		height: 94rpx;
		line-height: 94rpx;
		font-size: 32rpx;
		border: 1rpx solid #3662DD;
		color: #3662DD;
	}

	.mask_btn2 {
		background: linear-gradient(to right, #5095F4, #3662DD);
		border: none;
		color: #FFFFFF;
	}

	.fr2 {
		display: flex;
		flex-direction: row;
	}

	.fr2 .v1 {
		width: 428rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: right;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.fr2 .v2 {
		width: 58rpx;
		text-align: right;
		height: 98rpx;
	}

	.bgcor {
		background-color: red;
	}
</style>
